<template>
  <div>
    <van-cell title="训练营" is-link to="/campdetails" value="全部" />
    <div class="image-big-box">
      <div class="image-small-box" v-for="(item, i) in trainlist" :key="i">
        <div class="icon" :style="trainlist[i].style">{{ trainlist[i].icon }}</div>
        <van-image width="310" height="150" fit="cover" :src="trainlist[i].coverimage">
          <div class="coverimage"></div>
          <div class="train-text">
            <div class="train-text-left">
              <p>{{ trainlist[i].tct1 }}</p>
              <p>{{ trainlist[i].tct2 }}</p>
              <p>{{ trainlist[i].tct3 }}</p>
            </div>
            <div class="train-text-right">
              <p>
                <span>¥</span><span>{{ trainlist[i].tct4 }}</span
                ><span>{{ trainlist[i].tct5 }}</span>
              </p>
            </div>
          </div>
        </van-image>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Trainingcamp',

  data() {
    return {
      title: '训练营',
      trainlist: [
        {
          coverimage: require('../assets/train/ftc.jpg'),
          icon: '仅剩8人满员',
          style: 'background:#fff;color:#ff6040;',
          tct1: 'FTC高效瘦身训练营·03月09日班',
          tct2: '龙华大唐时代店/Nonstop',
          tct3: '每周 一/三 21:20-22:20',
          tct4: '300.00',
          tct5: '起/3课时'
        },
        {
          coverimage: require('../assets/train/火箭流一字马.jpg'),
          icon: '仅剩1人开班',
          style: 'background:#ff6040;color:#fff;',
          tct1: '火箭流·一字马训练营"',
          tct2: '龙华大唐时代店/冰冰老师',
          tct3: '每周 六/日 15:30-17:00',
          tct4: '699.00',
          tct5: '起/6课时'
        },
        {
          coverimage: require('../assets/train/火箭流一字马.jpg'),
          icon: '仅剩6人满员',
          style: 'background:#fff;color:#ff6040;',
          tct1: '火箭流瑜伽训练营·4月1号班',
          tct2: '龙华大唐时代店/冰冰老师',
          tct3: '每周 五 18:30-20:00',
          tct4: '29.00',
          tct5: '起/1课时'
        },
        {
          coverimage: require('../assets/train/火箭流一字马.jpg'),
          icon: '仅剩1人开班',
          style: 'background:#ff6040;color:#fff;',
          tct1: '火箭流·倒立训练营',
          tct2: '龙华大唐时代店/冰冰老师',
          tct3: '每周 六/日 15:30-17:00',
          tct4: '899.00',
          tct5: '起/8课时'
        },
        {
          coverimage: require('../assets/train/火箭流一字马.jpg'),
          icon: '仅剩3人开班',
          style: 'background:#ff6040;color:#fff;',
          tct1: '火箭流·后弯训练营·',
          tct2: '龙华大唐时代店/冰冰老师',
          tct3: '每周 六/日 15:30-17:00',
          tct4: '899.00',
          tct5: '起/8课时'
        },
        {
          coverimage: require('../assets/train/火箭流一字马.jpg'),
          icon: '仅剩6人满员',
          style: 'background:#fff;color:#ff6040;',
          tct1: '火箭流·手平衡训练营·',
          tct2: '龙华大唐时代店/冰冰老师',
          tct3: '每周 六/日 15:30-17:00',
          tct4: '899.00',
          tct5: '起/8课时'
        }
      ]
    }
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="less" scoped>
/deep/ .van-cell {
  margin: 12px 0px 6px;
}
/deep/ .van-cell__title {
  font-family: Georgia;
  font-size: 16px;
}
.image-big-box {
  width: 333.5px;
  display: flex;
  justify-content: start;
  overflow: hidden;
  margin-left: 10px;
  padding-bottom: 10px;
  .image-small-box {
    position: relative;
    margin-left: 4px;
    background-color: #f6f7f7;
    border-radius: 5px;
    .icon {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 12px;
      line-height: 16px;
      padding: 2px 10px;
      border-bottom-right-radius: 10px;
      z-index: 3;
    }
    /deep/ .van-image {
      position: relative;
      > img {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      .coverimage {
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 5px;
        background-color: #555555;
        height: 100%;
        width: 100%;
        opacity: 0.7;
      }
      .train-text {
        p {
          margin: 0px;
          color: #fff;
        }
        .train-text-left {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 8px;
          p:nth-child(1) {
            font-size: 16px;
          }
          p:nth-child(2) {
            font-size: 10px;
          }
          p:nth-child(3) {
            font-size: 10px;
            margin-top: 4px;
          }
        }
        .train-text-right {
          position: absolute;
          bottom: 0;
          right: 0;
          padding: 8px;
          p {
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
